<template>
    <div class="admin-login-page">
      <div class="admin-login-container">
        <div class="admin-login-header">
          <h2><i class="fas fa-user-shield"></i> 博客系统管理后台</h2>
          <p>请使用管理员账号登录</p>
        </div>
        
        <form @submit.prevent="handleAdminLogin" class="admin-login-form">
          <div class="form-group">
            <label for="admin-username"><i class="fas fa-user"></i> 用户名</label>
            <input 
              type="text" 
              id="admin-username" 
              v-model="username" 
              required
              placeholder="输入管理员用户名"
            >
          </div>
          
          <div class="form-group">
            <label for="admin-password"><i class="fas fa-lock"></i> 密码</label>
            <div class="password-input-wrapper">
              <input 
                :type="showPassword ? 'text' : 'password'" 
                id="admin-password" 
                v-model="password" 
                required
                placeholder="输入管理员密码"
              >
              <span class="toggle-password" @click="togglePasswordVisibility">
                <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
              </span>
            </div>
          </div>
          
          <button type="submit" class="admin-login-btn" :disabled="isLoading">
            <span v-if="isLoading"><i class="fas fa-spinner fa-spin"></i> 登录中...</span>
            <span v-else>登录管理后台</span>
          </button>
          
          <p class="user-login-link">
            普通用户? <router-link to="/login">返回用户登录</router-link>
          </p>
          
          <div v-if="error" class="admin-error-message">
            <i class="fas fa-exclamation-circle"></i> {{ error }}
          </div>
        </form>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useUserStore } from '@/store/user'
  import { userApi } from '@/api/api'
  
  const router = useRouter()
  const route = useRoute()
  const userStore = useUserStore()
  
  const username = ref('')
  const password = ref('')
  const showPassword = ref(false)
  const error = ref('')
  const isLoading = ref(false)
  
  const togglePasswordVisibility = () => {
    showPassword.value = !showPassword.value
  }
  
  const handleAdminLogin = async () => {
    try {
      isLoading.value = true
      error.value = ''
      
      const response = await userApi.login({
        username: username.value,
        password: password.value,
        email: null
      })
      
      // 检查是否是管理员 (假设userId为1是管理员)
      if (response.user_id !== 1) {
        throw new Error('您没有管理员权限')
      }
  
      // 存储token和用户信息
      localStorage.setItem('adminToken', response.token)
      localStorage.setItem('adminUserId', response.user_id)
      
      // 更新用户状态
      userStore.setUser({
        username: response.username,
        isLoggedIn: true,
        isAdmin: true,
        token: response.token,
        userId: response.user_id,
      })
      // 登录后重定向逻辑
      const redirectPath = route.query.redirect || (userStore.isAdmin ? '/admin/dashboard' : '/')
      await router.push(redirectPath)
      
    } catch (err) {
      error.value = err.message || '管理员登录失败，请检查用户名和密码'
      console.error('管理员登录错误:', err)
    } finally {
      isLoading.value = false
    }
  }
  </script>
  
  <style scoped>
  .admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: #f5f7fa;
  }
  
  .admin-login-container {
    background: white;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 450px;
  }
  
  .admin-login-header {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .admin-login-header h2 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  
  .admin-login-header p {
    color: #7f8c8d;
    font-size: 0.95rem;
  }
  
  .admin-login-form .form-group {
    margin-bottom: 1.5rem;
  }
  
  .admin-login-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .password-input-wrapper {
    position: relative;
  }
  
  .admin-login-form input {
    width: 100%;
    padding: 0.85rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    transition: border 0.3s;
  }
  
  .admin-login-form input:focus {
    outline: none;
    border-color: #3498db;
  }
  
  .toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #7f8c8d;
  }
  
  .admin-login-btn {
    width: 100%;
    padding: 0.85rem;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 1rem;
  }
  
  .admin-login-btn:hover {
    background-color: #2980b9;
  }
  
  .admin-login-btn:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
  }
  
  .user-login-link {
    text-align: center;
    margin-top: 1.5rem;
    color: #7f8c8d;
    font-size: 0.9rem;
  }
  
  .user-login-link a {
    color: #3498db;
    text-decoration: none;
  }
  
  .user-login-link a:hover {
    text-decoration: underline;
  }
  
  .admin-error-message {
    background-color: #fdecea;
    color: #d32f2f;
    padding: 0.75rem;
    border-radius: 6px;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
  }
  </style>